<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>复选框</title>
	<style>
		#txt{
			width: 200px;
			height: 100px;
			font-size: 16px;
			text-align: center;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<h1>复选框</h1>
	<hr>

	<label> <input type="checkbox" id='i1' value="1" checked>1</label>
	<label> <input type="checkbox" id='i2' value="2" checked>2</label>
	<label> <input type="checkbox" id='i3' value="3" checked>3</label>
	<label> <input type="checkbox" id='i4' value="4" checked>4</label>
	<label> <input type="checkbox" id='i5' value="5" checked>5</label><br>
	<button id="ckall" onclick="ckall()">全选</button>
	<button id="cknall" onclick="cknall()">全不选</button>
	<button id="rever" onclick="rever()">反选</button>
	<button id="val" onclick="val()">取值</button>
	<div id="txt"></div>

	<script>
		var arr = [];
		var num = document.getElementsByTagName('input');
		var txt = document.getElementById('txt');
		console.log(num);
        console.log(num.length);
        console.log(typeof(num));

        function ckall(){
        	for(var i = 0; i < num.length; i++){
        		num[i].checked=true;
        	}
        }

        function cknall(){
        	for(var i = 0; i < num.length; i++){
        		num[i].checked=false;
        	}
        }

        function rever(){
        	for(var i = 0;i<num.length;i++){
        		if(num[i].checked == true){
        			num[i].checked = false;
        		}else{
        			num[i].checked = true;
        		}
        	}
        }

        function val(){
        	for(var i = 0;i<num.length;i++){
        		if(num[i].checked == true){

        			arr[i] = num[i].value  ;
        			// console.log(arr);
        			// console.log(typeof(arr));

        		}
        		
        	}
	        	for (var i in arr) {
	            document.write( arr[i] + '<br>');
	        }
        }


	</script>
</body>
</html>